<template>
  <div class="table-box card">
    <el-tabs v-model="currentTabsType" class="demo-tabs" @tab-change="handleClickTabs">
      <el-tab-pane :label="item.name" :name="item.id" v-for="item in tabsList" :key="item"></el-tab-pane>
    </el-tabs>
    <ProTable
      ref="proTable"
      :columns="columns"
      :searchParam="state.formParams"
      :requestApi="getMyCustomerList"
      @filterChange="filterChange"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <div class="header-button-lf">
          <el-button type="primary" @click="openDrawer('新增')">新增客户</el-button>
          <el-button @click="openDrawerImportCustomer">导入</el-button>
          <div class="claim-restrictions ml-10">今日领取限制：<span class="text-primary">18/50</span></div>
        </div>

        <div class="header-button-ri">
          <el-input placeholder="请输入客户名称、联系方式进行搜索" v-model="state.formParams.keywords"></el-input>
          <el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
          <el-button icon="RefreshRight" @click="handleReset">重置</el-button>
          <el-dropdown>
            <el-button class="filter-btn"
              >模板筛选<el-icon class="el-icon--right"><ArrowDown /></el-icon
            ></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in templateList" :key="index">{{ item.name }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-button class="manage-btn" @click="openDrawerAdvancedFilter('template')">管理</el-button>
          <el-button icon="Filter" @click="openDrawerAdvancedFilter">高级筛选</el-button>
        </div>
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>

      <!-- 领取日期自定义表头 -->
      <template #dateOfCollectionHeader="scope">
        <span class="inline-block">
          <span class="flx-align-center">
            <span>{{ scope.column.label }}</span>
            <span class="flx-align-center ml-10">
              <el-icon @click.stop="handleClickCalendar"><Calendar /></el-icon>
              <el-date-picker
                v-model="times"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                ref="timePick"
                class="time-pick"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              >
              </el-date-picker>
            </span>
          </span>
        </span>
      </template>
    </ProTable>

    <!-- 新增 -->
    <client-add ref="clientAddRef"></client-add>

    <!-- 导入客户 -->
    <import-customer ref="importCustomerRef"></import-customer>

    <!-- 高级筛选 -->
    <advanced-filter ref="advancedFilterRef" @search="advancedFilterChange"></advanced-filter>

    <!-- 客户详情 -->
    <client-detail ref="clientDetailRef"></client-detail>
  </div>
</template>

<script lang="tsx" setup>
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import ClientAdd from "./components/ClientAdd.vue";
import ImportCustomer from "./components/ImportCustomer.vue";
import AdvancedFilter from "./components/AdvancedFilter.vue";
import ClientDetail from "./components/Detail/detail.vue";
import { ProTableInstance } from "@/components/ProTable/interface";
import { getMyCustomerList, getTodayClaimRestrictions } from "@/api/modules/myClient";

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 获取领取限制
const getRestrictions = async () => {
  let res = await getTodayClaimRestrictions({});
  console.log(res);
};

// 顶部合同分类
const currentTabsType = ref("");
const tabsList = [
  { id: "", name: "全部" },
  { id: "1", name: "已签合同" },
  { id: "2", name: "合同已回款" },
  { id: "3", name: "跟进中" },
  { id: "4", name: "已轮转至挽救库" }
];

const handleClickTabs = e => {
  state.formParams.type = e;
  handleSearch();
};

// 获取客户级别
const getLevlelList = () => {
  return [
    { text: "A", value: "A" },
    { text: "B", value: "B" },
    { text: "C", value: "C" },
    { text: "D", value: "D" },
    { text: "E", value: "E" },
    { text: "F", value: "F" },
    { text: "G", value: "G" }
  ];
};

// 表格配置项
const columns = reactive([
  {
    prop: "username",
    label: "客户名称",
    width: 296,
    render: scope => {
      return (
        <el-link type="primary" onClick={() => openDrawerClientDetail(scope.row)}>
          {scope.row.username}
        </el-link>
      );
    }
  },
  {
    prop: "level",
    columnKey: "level",
    label: "客户级别",
    minWidth: 116,
    render: scope => {
      return <el-tag type="primary">{scope.row.level}</el-tag>;
    },
    filterMultiple: true,
    filters: getLevlelList()
  },
  {
    prop: "businessType",
    columnKey: "businessType",
    label: "业务类型",
    minWidth: 140,
    render: scope => {
      return <el-tag type="primary">{scope.row.businessType}</el-tag>;
    },
    filterMultiple: true,
    filters: getLevlelList()
  },
  {
    prop: "dateOfCollection",
    label: "领取日期",
    minWidth: 140,
    sortable: "custom"
  },
  {
    prop: "contactInformation",
    label: "联系方式",
    minWidth: 165
  },
  {
    prop: "latestFollowTime",
    label: "最新跟进时间",
    minWidth: 175
  },
  {
    prop: "latestFollowContent",
    label: "最新跟进内容",
    minWidth: 280
  },
  {
    prop: "customerStatus",
    label: "客户状态",
    minWidth: 135
  },
  {
    prop: "customerSource",
    label: "客户来源",
    minWidth: 135
  }
]);

const state = reactive({
  formParams: {}
});

// 模版列表
const templateList = ref([
  { id: 1, name: "模版1" },
  { id: 2, name: "模版2" },
  { id: 3, name: "模版3" }
]);

// 表头筛选 columnKey 必填
const filterChange = e => {
  state.formParams[Object.keys(e)] = e[Object.keys(e)];

  console.log(state.formParams);
  handleSearch();
};

// 查询
const handleSearch = () => {
  proTable.value?.search();
};

// 高级筛选
const advancedFilterChange = (params = {}) => {
  proTable.value?.clearFilter();
  state.formParams = {
    ...state.formParams,
    ...params
  };
};

// 重置
const handleReset = () => {
  state.formParams = {};
  proTable.value?.reset();
  advancedFilterRef.value.reset();
};

// 选择时间
const times = ref([]);
const timePick = ref();
const handleClickCalendar = () => {
  timePick.value.focus();
};

// 新增客户窗口
const clientAddRef = ref();
const openDrawer = (title: string, row: object) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    // api: title === "新增" ? addUser : title === "编辑" ? editUser : undefined,
    getTableList: proTable.value?.getTableList
  };
  clientAddRef.value?.acceptParams(params);
};

// 显示导入客户窗口
const importCustomerRef = ref();
const openDrawerImportCustomer = () => {
  importCustomerRef.value?.acceptParams({
    getTableList: proTable.value?.getTableList
  });
};

// 显示高级筛选
const advancedFilterRef = ref();
const openDrawerAdvancedFilter = type => {
  advancedFilterRef.value?.acceptParams({
    showTemplate: type == "template" ? true : false,
    getTableList: proTable.value?.getTableList
  });
};

// 显示客户详情
const clientDetailRef = ref();
const openDrawerClientDetail = row => {
  console.log(row);
  clientDetailRef.value.acceptParams(row);
};
</script>

<style lang="scss" scoped>
.filter-btn {
  border-radius: 4px 0 0 4px;
}
.manage-btn {
  border-radius: 0 4px 4px 0;
  border-left: none;
  margin-left: -9px !important;
}
</style>
